<%@ page language="java" pageEncoding="utf-8" contentType="text/html;charset=utf-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title></title>
    <base href=" <%=basePath%>">
    <link href="/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/assets/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="/assets/css/hoverifyBootnav.css">
    <link href="/assets/codemirror/codemirror-5.39.2/lib/codemirror.css" rel="stylesheet" type="text/css">
    <link href="/assets/codemirror/codemirror-5.39.2/theme/monokai.css" rel="stylesheet" type="text/css">
    <link href="/assets/codemirror/codemirror-5.39.2/addon/display/fullscreen.css" rel="stylesheet" type="text/css">



    <link href="/assets/css/submit.css" rel="stylesheet">

    <link href="/assets/css/header.css" rel="stylesheet">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
        }
    </style>

</head>
<body>

<header class="container">

    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <%--<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">--%>
                <%--<ul class="nav navbar-nav navbar-right">--%>
                    <%--<li><a href="#">题目 </a></li>--%>
                    <%--<li class="dropdown">--%>
                        <%--<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">排行榜 <span class="caret"></span></a>--%>
                        <%--<ul class="dropdown-menu mega-menu-3 transition">--%>
                            <%--<li><a href="#">天梯榜</a></li>--%>
                            <%--<li><a href="#">英雄榜</a></li>--%>
                        <%--</ul>--%>
                    <%--</li>--%>
                    <%--<li class="dropdown">--%>
                        <%--<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">帮助 <span class="caret"></span></a>--%>
                        <%--<ul class="dropdown-menu mega-menu-3 transition">--%>
                            <%--<li><a href="#">Help 1</a></li>--%>
                            <%--<li><a href="#">Help 2</a></li>--%>
                        <%--</ul>--%>
                    <%--</li>--%>
                    <%--<li class="dropdown">--%>
                        <%--<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">--%>
                            <%--<span class="glyphicon glyphicon-user"></span><span class="caret"></span></a>--%>
                        <%--<div class="dropdown-menu mega-menu-3 transition  eader-user">--%>
                            <%--<ul>--%>
                                <%--<li class="nav-title"></li>--%>
                                <%--<li>--%>
                                    <%--<a  id="btn-avatar" class="launch-modal" data-modal-id="modal-avator" data-toggle="modal" data-target="#modal-avatar">--%>
                                        <%--<img src="/user/avatar" id="avatar" width="128px" height="128px" style="border-radius: 50%">--%>
                                    <%--</a>--%>

                                <%--</li>--%>
                            <%--</ul>--%>
                            <%--<ul class="two-column">--%>
                                <%--<li class="nav-title"></li>--%>
                                <%--<li><a href="#" class="header-user">用户名</a></li>--%>
                                <%--<li><a href="#" class="header-user">等级_称号</a></li>--%>
                                <%--<li><a href="#" class="header-user">金币</a></li>--%>
                                <%--<li><a href="#" class="header-user">威望值</a></li>--%>
                            <%--</ul>--%>
                            <%--<ul class="three-column"></ul>--%>
                            <%--<ul>--%>
                                <%--<li>--%>
                                    <%--<a href="#" class="btn">个人中心</a>--%>
                                <%--</li>--%>
                            <%--</ul>--%>
                            <%--<ul>--%>
                                <%--<li>--%>
                                    <%--<a href="#" class="btn">游戏商城</a>--%>
                                <%--</li>--%>
                            <%--</ul>--%>
                            <%--<ul>--%>
                                <%--<li>--%>
                                    <%--<a href="#" class="btn">注销登录</a>--%>
                                <%--</li>--%>
                            <%--</ul>--%>
                        <%--</div>--%>
                    <%--</li>--%>
                <%--</ul><!-- 2 Menu Examples Ends -->--%>
            <%--</div><!-- /.navbar-collapse -->--%>
            <div class="row">
                <div class="separator " style="float: right">
                    <ul class="nav nav-pills">
                        <li role="presentation" class="active"><a href="#">题目</a></li>
                        <li role="presentation" class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
                                排行榜 <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">天梯榜</a></li>
                                <li class="divider"></li>
                                <li><a href="#">英雄榜</a></li>
                            </ul>
                        </li>
                        <li role="presentation" class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
                                帮助 <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">help 1</a></li>
                                <li><a href="#">help 2</a></li>
                            </ul>
                        </li>
                        <li class="dropdown pull-right">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="dropdown-user">
                                角色姓名<span class="glyphicon glyphicon-user"></span><span class="caret"></span></a>
                            <div class="dropdown-menu mega-menu-3 transition  eader-user">
                                <ul>
                                    <li class="nav-title"></li>
                                    <li>
                                        <a  id="btn-avatar" class="launch-modal" data-modal-id="modal-avator" data-toggle="modal" data-target="#modal-avatar">
                                            <img src="/user/avatar" id="avatar" width="128px" height="128px" style="border-radius: 50%">
                                        </a>
                                        <%--<iframe src="" width="128" height="128" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>--%>
                                    </li>
                                </ul>
                                <ul class="two-column">
                                    <li class="nav-title"></li>
                                    <li class="header-user" id="header-user-nickname">用户名</li>
                                    <li class="header-user" id="header-user-level">等级_称号</li>
                                    <li class="header-user" id="header-user-money">金币</li>
                                    <li class="header-user" id="header-user-prestige">威望值</li>
                                </ul>
                                <ul class="three-column"></ul>
                                <ul>
                                    <li>
                                        <a href="/user/profile" class="btn-menu" id="btn-user">个人中心</a>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <a href="#" class="btn-menu" id="btn-mall">游戏商城</a>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <a href="/user/logout" class="btn-menu" id="btn-logout">注销登录</a>
                                    </li>
                                </ul>
                            </div>
                        </li>

                    </ul>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </nav>



</header><!-- /container -->
<section class="container">
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <!--<div class="modal-header">-->
                <!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">-->
                <!--&times;-->
                <!--</button>-->
                <!--&lt;!&ndash;<h4 class="modal-title" id="myModalLabel">&ndash;&gt;-->
                <!--&lt;!&ndash;提交结果&ndash;&gt;-->
                <!--&lt;!&ndash;</h4>&ndash;&gt;-->
                <!--</div>-->
                <div class="modal-body">

                    <h4 class="pull-left ">提交结果</h4>
                    <div class="pull-right" >
                        <div style="float: left;"><h4 id="judgeresult"></h4></div>
                        <div class="spinner" class="pull-left " style="float: left;margin-left: 10px;margin-top: 8px" id="submitloading">
                            <div class="spinner-container container1">
                                <div class="circle1"></div>
                                <div class="circle2"></div>
                                <div class="circle3"></div>
                                <div class="circle4"></div>
                            </div>
                            <div class="spinner-container container2">
                                <div class="circle1"></div>
                                <div class="circle2"></div>
                                <div class="circle3"></div>
                                <div class="circle4"></div>
                            </div>
                            <div class="spinner-container container3">
                                <div class="circle1"></div>
                                <div class="circle2"></div>
                                <div class="circle3"></div>
                                <div class="circle4"></div>
                            </div>
                        </div>
                    </div>


                </div>
                <div class="modal-footer" style="margin-top: 30px">
                    <div class="panel panel-default hidden" id="hiddenpanle">
                        <div class="panel-body text-left" id="resultdetails">
                            这是一个基本的面板
                        </div>
                    </div>

                    <button type="button" class="btn btn-default" data-dismiss="modal" id="shut">关闭</button>
                    <button type="button" class="btn btn-primary" id="location">返回修炼路径</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <div class="container">
        <div class="row1">
            <div class="text-center">
                <h2 id="title">

                </h2>
                <h5 id="limit">

                </h5>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    任务描述
                </h3>
            </div>
            <div class="panel-body" id="content" >

            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    输入输出要求
                </h3>
            </div>
            <div class="panel-body" id="standard">

            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    样例
                </h3>
            </div>
            <div class="panel-body" id="sample">
                <p>样例输入:</p>
                <p id="sampleInput" ></p>
                <br>
                <p>样例输出:</p>
                <p id="sampleOutput" ></p>
            </div>
        </div>
        <div class="row">
            <div class="text-left" style="margin-left: 15px;float: left">
                <select class="selectpicker" data-size="3" data-live-search="true" id="language" class="pull-left" >
                    <option value="0">C</option>
                    <option value="1">C++</option>
                    <option value="2">Pascal</option>
                    <option value="3">Java</option>
                    <option value="4">Ruby</option>
                    <option value="5">Bash</option>
                    <option value="6">Python</option>
                    <option value="7">PHP</option>
                    <option value="8">Perl</option>
                    <option value="9">C#</option>
                    <option value="10">Obj-C</option>
                    <option value="11">FreeBasic</option>
                    <option value="12">Scheme</option>
                    <option value="13">Clang</option>
                    <option value="14">Clamg++</option>
                    <option value="15">Lua</option>
                    <option value="16">JavaScript</option>
                    <option value="17">Go</option>
                </select>
            </div>

            <div class="pull-right" style="float: right">
                <div class="btn-group btn-group-sm" class="center-block">
                    <button type="button" class="btn btn-default shadow" style="margin-bottom: 5px;margin-right: 15px" id="clear" data-toggle="tooltip" data-placement="top" title="重置" >
                        <span>
                            <i class="glyphicon glyphicon-refresh" aria-hidden="true"></i>
                        </span>
                    </button>
                    <button type="button" class="btn btn-default shadow" style="margin-bottom: 5px; margin-right: 15px" id="lastcode" data-toggle="tooltip" data-placement="top" title="恢复">
                        <span>
                            <i class="glyphicon glyphicon-file" aria-hidden="true"></i>
                        </span>
                    </button>

                </div>
            </div>

        </div>
        <form role="form" onsubmit="return false;">
            <div class="form-group">

                <textarea class="form-control" rows="15" id="code"></textarea>
            </div>
        </form>
    </div>
    <div class="container" style="margin-bottom: 30px">
        <div class="row" >

            <form  class="form-inline" onsubmit="return false;">
                <div class="check-box " style="float: left;margin-left: 15px" >
                    <label>
                        <input type="checkbox" id="check"> Custom Testcase
                    </label>
                </div>
                <div style="float: right;margin-right: 15px" >
                    <button class="btn btn-default shadow radious"   id="run" ><span ><i class="glyphicon glyphicon-play" aria-hidden="true"></i></span> run code</button>
                    <button class="btn btn-primary shadow radious"   id="submit" ><span><i  class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></i></span> submit solution</button>
                </div>
            </form>


        </div>
        <div class='form-group hidden'id="testcase" > <textarea class='form-control ' rows='4' id='test' style="width: 50%"></textarea></div>
    </div>




    <div class="container" style="margin-top: 20px" >
        <div class="container">
            <div class="row1" class="form-inline" style="vertical-align: middle">
                <div style="float: left" class="hidden" id="deresult">
                    <div style="float: left"> <h2 > Run Code Status:</h2></div>
                    <div style="float: left"> <h2 id="result"> Result</h2></div>
                </div>

                <div class="spinner pull-left hidden" style="float: left;margin-left: 10px;margin-top: 25px" id="loading">
                    <div class="spinner-container container1">
                        <div class="circle1"></div>
                        <div class="circle2"></div>
                        <div class="circle3"></div>
                        <div class="circle4"></div>
                    </div>
                    <div class="spinner-container container2">
                        <div class="circle1"></div>
                        <div class="circle2"></div>
                        <div class="circle3"></div>
                        <div class="circle4"></div>
                    </div>
                    <div class="spinner-container container3">
                        <div class="circle1"></div>
                        <div class="circle2"></div>
                        <div class="circle3"></div>
                        <div class="circle4"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="hidden" id="morede">
            <hr class="simple" color="#6f5499" />
            <div class="panel-group" id="accordion">

                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion"
                           href="#collapseTwo">
                            Your input
                            </a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse">
                        <div class="panel-body" id="selfinput">

                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion"
                           href="#collapseOne">
                            Your answer
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse">
                        <div class="panel-body" id="selfanswer">

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

<input type="hidden" id="pid" value="${obj.pid}">
</section>
<script src="/assets/js/jquery-1.11.1.min.js"></script>
<script src="/assets/js/jquery-latest.js"></script>
<script src="/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="/assets/js/jquery.velocity.min.js"></script>
<script src="/assets/js/hoverifyBootnav.js"></script>
<script type="text/javascript" src="/assets/codemirror/codemirror-5.39.2/lib/codemirror.js"></script>
<script type="text/javascript" src="/assets/codemirror/codemirror-5.39.2/mode/javascript/javascript.js"></script>
<script type="text/javascript" src="/assets/codemirror/codemirror-5.39.2/mode/xml/xml.js"></script>
<script type="text/javascript" src="/assets/codemirror/codemirror-5.39.2/mode/css/css.js"></script>
<script type="text/javascript" src="/assets/codemirror/codemirror-5.39.2/mode/htmlmixed/htmlmixed.js"></script>
<script type="text/javascript" src="/assets/codemirror/codemirror-5.39.2/mode/cmake/cmake.js"></script>
<script type="text/javascript" src="/assets/codemirror/codemirror-5.39.2/mode/clike/clike.js"></script>
<script type="text/javascript" src="/assets/codemirror/codemirror-5.39.2/mode/php/php.js"></script>
<script type="text/javascript" src="/assets/codemirror/codemirror-5.39.2/mode/python/python.js"></script>
<script type="text/javascript" src="/assets/codemirror/codemirror-5.39.2/mode/ruby/ruby.js"></script>
<script type="text/javascript" src="/assets/codemirror/codemirror-5.39.2/mode/lua/lua.js"></script>
<script type="text/javascript" src="/assets/codemirror/codemirror-5.39.2/mode/go/go.js"></script>
<script type="text/javascript" src="/assets/codemirror/codemirror-5.39.2/addon/selection/active-line.js"></script>
<script type="text/javascript" src="/assets/codemirror/codemirror-5.39.2/addon/edit/matchbrackets.js"></script>
<script type="text/javascript" src="/assets/codemirror/codemirror-5.39.2/addon/display/fullscreen.js"></script>
<!--<script type="text/javascript" src="assets/codemirror/codemirror-5.39.2/addon/hint/show-hint.js"></script>-->
<!--<script type="text/javascript" src="assets/codemirror/codemirror-5.39.2/addon/hint/javascript-hint.js"></script>-->
<script type="text/javascript" src="/assets/bootstrap-select/js/bootstrap-select.js"></script>
<script type="text/javascript" src="/assets/js/submit.js"></script>
<script type="text/javascript">
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        lineNumbers: true,
        indentUnit: 4,
        styleActiveLine: true,
        matchBrackets: true,
        mode: 'text/x-c++src',
        lineWrapping: true,
        theme: 'monokai',

    });
    $(function () { $('#collapseTwo').collapse('show')});
    $(function () { $('#collapseOne').collapse('show')});
</script>
</body>
</html>